<script setup>
import { createModal } from '@/utils/useModal'
import MyComponent from '@/components/LoveTalk.vue'

// 使用组件
function showComponentModal() {
  const { close } = createModal(MyComponent, {
    props: {
     data: '我是传递给组件的数据'
    },
    on: {
      getTalkCallback(data) {
        alert(data);
      }
    },
    config: {
       header: '我是一个弹窗',
       closeOnClickOverlay: false,
       customButton: false,
       success: (data) => {
        console.log(data[0]);
        close();
      }
    }
  })
}

// 使用HTML (不推荐)
function showHtmlModal() {
  const { close } = createModal(
    `<div>
      <p>有内鬼，交易终止！</p>
    </div>`,
    { html: true,config: {
      success: () => {
        console.log('弹窗关闭了');
        close();
      }
    } }
  )
}
</script>

<template>
  <button @click="showComponentModal">业务组件弹窗</button>
  <button @click="showHtmlModal">纯HTML</button>
</template>